<template>
  <Select v-model="selectValue"
             @change="change"
             :placeholder="placeholder"
             :clearable="clearable"
             :disabled="isDisabled">
    <Option
        v-for="item in list"
        :key="item[keyField]"
        :value="item[valField]">
      {{item[showField]}}
    </Option>
  </Select>
</template>
<!--


    <common-select
        key-field="prop"
        show-field="label"
        val-field="prop"
        :list="modelColumns"
        v-model="form.modelStatusName"/>

-->
<script>
export default {
  name: 'CommonSelect',
  props: {
    value: {
      type: String,
      default: () => {
        return '';
      }
    },
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
    valField: {
      type: String,
      default: 'value'
    },
    keyField: {
      type: String,
      default: 'value'
    },
    showField: {
      type: String,
      default: 'label'
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    isDisabled: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'small'
    },
    clearable: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      selectValue: this.value,
    }
  },
  methods: {
    change () {
      // val = val ? val : this.selectValue;
      this.$emit('input', this.selectValue)
      this.$emit('change', this.selectValue)
    }
  },
  watch: {
    selectValue (val) {
      this.$emit('input', val)
    },
    list(val) {
      console.log(val)
    }
  }
}
</script>
